import React from 'react';
import * as FontAwesome from 'react-icons/lib/fa'
import Slider from '../Slider/Slider.jsx';
import IndexNewSlider from './Index_news_slider.jsx';

var $ = require('jquery');

class IndexContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            classType: '',
            contentType: '',
            visionArr: [
                {link: "", text: "人脸技术"},
                {link: "", text: "物体检测"},
                {link: "", text: "视觉问答"},
                {link: "", text: "图像描述"},
                {link: "", text: "视觉嵌入式技术"}
            ],
            navigationArr: [
                {link: "", text: "UWB传感器"},
                {link: "", text: "定位导航系统"}
            ],
            steerArr: [
                {link: "", text: "小型伺服舵机"}
            ],
            moveArr:[
                {link:"",text:"双足步态控制"},
                {link:"",text:"手眼协调抓取"},
                {link:"",text:"机械臂安全柔性控制"}
            ]
        };
        this.menuListCkick = this.menuListCkick.bind(this);
        this.imgSlider = this.imgSlider.bind(this);
        this.menuList = this.menuList.bind(this);

        /* 绑定事件中this */
        this.imgSlider = this.imgSlider.bind(this);
    }
    _pressButton() {
        const { navigator } = this.props;
        //或者写成 const navigator = this.props.navigator;
        //为什么这里可以取得 props.navigator?请看上文:
        //<Component {...route.params} navigator={navigator} />
        //这里传递了navigator作为props
        if(navigator) {
            navigator.push({
                name: 'uwbContent',
                component: uwbContent,
                params:{

                }
            })
        }
    }
    imgSlider(){
        return <Slider />
    }
    newsList(){
        return <IndexNewSlider />
    }
    menuList(arr){
        var menuContent = [];
        for(var i=0;i< arr.length; i++){
            menuContent.push(<a href={arr[i].link} key={i} className="ai-tech-item">{arr[i].text}</a>);
        }
        return menuContent;
    }
    menuListCkick(keyStr,len,e){
        const height = 3.3333*len + 'rem';
        $(e.target).sielings('.ai-accordion-content').height(height);
        if(this.state.classType == keyStr){
            this.setState({
                classType: '',
            });
        }else{
            this.setState({
                classType: keyStr
            });
        }

    }
    render() {
        const imgSlider = this.imgSlider();
        const newsList = this.newsList();
        // const newsList = this.newsList();

        const visionContent = this.menuList(this.state.visionArr);
        const navigationContent = this.menuList(this.state.navigationArr);
        const steerContent = this.menuList(this.state.steerArr);
        const moveContent = this.menuList(this.state.moveArr);

        const visionClass = this.state.classType === "vision" ? "ai-accordion-content":"ai-accordion-content ai-accordion-content-active";
        const navigationClass = this.state.classType === "navigation" ? "ai-accordion-content":"ai-accordion-content ai-accordion-content-active";
        const steerClass = this.state.classType === "steer" ? "ai-accordion-content":"ai-accordion-content ai-accordion-content-active";
        const moveClass = this.state.classType === "move" ? "ai-accordion-content":"ai-accordion-content ai-accordion-content-active";
        return (
           <div className="index-swipe index-ai-swipe">
                <div className="index-swipe-items-wrap" classID="myCarousel">
                    {imgSlider}
                </div>
               <div>
                   {newsList}
               </div>
               <div className="ai-section p-t-md p-b-md">
                    <div className="home-heading ai-heading">
                        全球领先的AI服务
                    </div>
                   <div className="ai-accordion">
                       <div className="ai-accordion-item" onClick={this.menuListCkick.bind(this,'vision',this.state.visionArr.length)}>
                            <div className="ai-accordion-title">
                                视觉技术
                                <div className="ai-accordion-arrow"><FontAwesome.FaAngleDown /></div>
                            </div>
                           <div className={visionClass}>
                               {visionContent}
                           </div>
                       </div>
                       <div className="ai-accordion-item" onClick={this.menuListCkick.bind(this,'navigation',this.state.navigationArr.length)}>
                           <div className="ai-accordion-title">
                               定位导航
                               <div className="ai-accordion-arrow"><FontAwesome.FaAngleDown /></div>
                           </div>
                           <div className={navigationClass}>
                               {navigationContent}
                           </div>
                       </div>
                       <div className="ai-accordion-item" onClick={this.menuListCkick.bind(this,'steer',this.state.steerArr.length)}>
                           <div className="ai-accordion-title">
                               伺服舵机
                               <div className="ai-accordion-arrow"><FontAwesome.FaAngleDown /></div>
                           </div>
                           <div className={steerClass}>
                               {steerContent}
                           </div>
                       </div>
                       <div className="ai-accordion-item" onClick={this.menuListCkick.bind(this,'move',this.state.moveArr.length)}>
                           <div className="ai-accordion-title">
                               运动控制
                               <div className="ai-accordion-arrow"><FontAwesome.FaAngleDown /></div>
                           </div>
                           <div className={moveClass}>
                               {moveContent}
                           </div>
                       </div>
                   </div>
               </div>
               <div className="ai-section p-b-lg">
                    <div className="home-heading ai-heading">我们的产品</div>
                   <div className="home-heading-des">各类产品形式，广泛覆盖多种业务类型</div>
                   <div className="ai-ecology">
                       <div className="ai-ecology-item ai-apollo">
                            <div className="ai-ecology-item-lt">
                                <img src="./images/index_images/online-API.png"/>
                            </div>
                           <div className="ai-ecology-item-rt">
                                <div className="ai-ecology-item-lt-inner">
                                    <p className="inner-title">在线API</p>
                                    <p className="inner-des">目前人脸技术，物体检测，图像描述等均已支持在线API的定制，体验最新的优必选AI技术</p>
                                </div>
                           </div>
                       </div>
                       <div className="ai-ecology-item ai-apollo">
                           <div className="ai-ecology-item-lt">
                               <img src="./images/index_images/Mobile-SDK.png"/>
                           </div>
                           <div className="ai-ecology-item-rt">
                               <div className="ai-ecology-item-lt-inner">
                                   <p className="inner-title">移动端SDK</p>
                                   <p className="inner-des">目前人脸技术，物体检测，图像描述等均已支持将移动端SDK集成到应用中，在移动设备上使用</p>
                               </div>
                           </div>
                       </div>
                       <div className="ai-ecology-item ai-apollo">
                           <div className="ai-ecology-item-lt">
                               <img src="./images/index_images/Hardware-products.png"/>
                           </div>
                           <div className="ai-ecology-item-rt">
                               <div className="ai-ecology-item-lt-inner">
                                   <p className="inner-title">解决方案</p>
                                   <p className="inner-des">我们提供定位导航系统不同场景下的解决方案，可定制不同扭矩伺服舵机的完整解决方案</p>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
               <div className="ai-application ai-section">
                   <div className="home-heading ai-heading is-black">我们的应用</div>
                   <div className="ai-solution-container">
                        <div className="ai-solution-item">
                            <div className="ai-solution-item-bg vqa-check"></div>
                            <div className="ai-solution-item-text">
                                <p className="ai-solution-item-title">VQA智能识图</p>
                                <p className="ai-solution-item-des">国际领先的VQA技术为基于认知辅助类应用提供技术支持，不止懂图，更加懂你</p>
                            </div>
                        </div>
                       <div className="ai-solution-item">
                           <div className="ai-solution-item-bg robot-joint-check"></div>
                           <div className="ai-solution-item-text">
                               <p className="ai-solution-item-title">机器人关节</p>
                               <p className="ai-solution-item-des">安装接线灵活轻便的伺服舵机，扮演机器人关节作用，实现多个自由度，能够灵活实现运动功能</p>
                           </div>
                       </div>
                       <div className="ai-solution-item">
                           <div className="ai-solution-item-bg robot-gait-check"></div>
                           <div className="ai-solution-item-text">
                               <p className="ai-solution-item-title">机器人步态</p>
                               <p className="ai-solution-item-des">中大型双足机器人的行走控制，能够适用于平地，斜坡，楼梯及非结构化地面等多种地形</p>
                           </div>
                       </div>
                       <div className="ai-solution-item">
                           <div className="ai-solution-item-bg intelligent-guide-check"></div>
                           <div className="ai-solution-item-text">
                               <p className="ai-solution-item-title">智能引导</p>
                               <p className="ai-solution-item-des">为移动设备提供导航定位、避障、地图重建、场景物体识别技术</p>
                           </div>
                       </div>
                   </div>
               </div>
               <div className="ai-section ai-features">
                   <div className="home-heading ai-heading is-white">我们的特色</div>
                   <div className="ai-features-list">
                        <div className="ai-features-item">
                            <img src="./images/index_images/professional.png" className="ai-features-logo"/>
                            <div className="ai-features-item-title">专业</div>
                            <div className="ai-features-item-text">多项技术经过国际顶级比赛验证，更专业，更准确</div>
                        </div>
                       <div className="ai-features-item">
                           <img src="./images/index_images/efficient.png" className="ai-features-logo"/>
                           <div className="ai-features-item-title">高效</div>
                           <div className="ai-features-item-text">快速实践，快速落地，快速运用，顶尖团队实现高效服务</div>
                       </div>
                       <div className="ai-features-item">
                           <img src="./images/index_images/innovation.png" className="ai-features-logo"/>
                           <div className="ai-features-item-title">创新</div>
                           <div className="ai-features-item-text">不断探索，不断创新，从技术应用到技术开发，均充满惊喜</div>
                       </div>
                   </div>
               </div>
           </div>
        )}
}
//导出组件
module.exports = IndexContent;